.sidebar {
  position: relative;
  padding: var(--h-padding-xl) 0;
  background: var(--clr-bg-sidebar-light);

  @media (width <= 360px) {
    display: none;
  }
}

.wrapper {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
  width: var(--sidebar-width);

  &.collapsed {
    width: var(--collapse-width);
  }
}

.line {
  width: 100%;
  height: 2px;
  background-color: var(--clr-accent-text);
}

.logo {
  color: var(--greyscale-text-negative);
  text-align: center;
}

.form {
  padding: 0 var(--gap-main);
}

.logo-small {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  background-color: var(--greyscale-text-negative);
  border-radius: 50%;
}

.arrow {
  margin-left: auto;
  border: none;

  // animation-name: rotation-arrow;
  // animation-duration: 1s;
  // animation-fill-mode: forwards;

  // @keyframes rotation-arrow {
  //   to {
  //     transform: rotate(180deg);
  //   }
  // }
}

.switcher-box {
  position: fixed;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-main);
  place-self: center;
  align-items: center;
  padding: var(--gap-2xl);

  @media (width <= 768px) {
    padding: var(--gap-main);
  }
}
